<!--add by yanyj 20180716 start-->
<html>
<head>
    <title>电子地图</title>
</head>
<body>

<div>
    <div class="map-page-content">
        <div id="dzdtMap"></div>
        <div id="mouse-position"></div>
    </div>
    <div class="map-tools">
        <div class="tool-item">
            <input type="checkbox" class="layer-select" id="hdLayer">
            <label for="" class="label-name">航道</label>
        </div>
        <div class="tool-item">
            <input type="checkbox" class="layer-select">
            <label for="" class="label-name">航段</label>
        </div>
        <div class="tool-item">
            <input type="checkbox" class="layer-select" id="gcdLayer">
            <label for="" class="label-name">流量观测点</label>
        </div>
        <div class="tool-item">
            <input type="checkbox" class="layer-select">
            <label for="" class="label-name">里程桩</label>
        </div>
        <div class="tool-item">
            <input type="checkbox" class="layer-select">
            <label for="" class="label-name">桥梁</label>
        </div>
        <div class="tool-item">
            <input type="checkbox" class="layer-select">
            <label for="" class="label-name">AIS船舶</label>
        </div>
        <div class="tool-item">
            <input type="checkbox" class="layer-select" id="stampLayer">
            <label for="" class="label-name">标点</label>
        </div>
        <#--<div class="tool-item">-->
            <#--<div class="">图层</div>-->
            <#--<i class="fas fa-angle-down" style="font-size: 22px;"></i>-->

            <#--<div class="drown-select">-->
                <#--<ul>-->
                    <#--<li id="areaLayer">区域</li>-->
                    <#--<li id="observablePointLayer">流量观测点</li>-->
                    <#--<li>里程桩</li>-->
                    <#--<li>桥梁</li>-->
                    <#--<li>AIS船舶</li>-->
                    <#--<li>标记</li>-->
                <#--</ul>-->
            <#--</div>-->
        <#--</div>-->
        <#--<div class="tool-item"></div>-->
        <#--<div class="tool-item"></div>-->
    </div>
    <#--<div class="page-utils">-->
        <#--<div class="utils-r-b-slider">-->
            <#--<ul class="right-bottom-slider">-->
                <#--<li>-->
                    <#--<div class="location-tool" data-toggle="tooltip" data-placement="right" title="定位">-->
                        <#--<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"-->
                             <#--p-id="5112" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">-->
                            <#--<defs>-->
                                <#--<style type="text/css"></style>-->
                            <#--</defs>-->
                            <#--<path d="M639.297829 382.7712c-17.2032-17.173943-37.829486-30.954057-60.328229-40.257829-22.498743-9.303771-46.811429-14.1312-71.153371-14.1312-24.341943 0-48.683886 4.827429-71.153371 14.1312-22.498743 9.303771-43.125029 23.054629-60.328229 40.257829-17.2032 17.173943-30.983314 37.800229-40.316343 60.240457-9.303771 22.469486-14.160457 46.752914-14.160457 71.0656 0 24.312686 4.827429 48.596114 14.160457 71.0656 9.303771 22.469486 23.083886 43.066514 40.316343 60.240457 17.2032 17.173943 37.829486 30.954057 60.328229 40.257829 22.469486 9.303771 46.811429 14.1312 71.153371 14.1312 24.341943 0 48.654629-4.827429 71.153371-14.1312 22.469486-9.303771 43.125029-23.054629 60.328229-40.257829 17.2032-17.173943 30.983314-37.770971 40.287086-60.240457 9.303771-22.440229 14.160457-46.752914 14.160457-71.0656 0-24.312686-4.856686-48.596114-14.160457-71.0656C670.3104 420.571429 656.530286 399.9744 639.297829 382.7712zM918.557257 467.529143c-16.647314-199.533714-162.962286-348.3648-362.788571-362.203429L555.768686 0l-85.4016 0 0 106.7008C276.128914 124.693943 122.090057 272.149943 105.442743 467.529143L0 467.529143l0 87.127771 105.442743 0c16.647314 195.3792 168.842971 343.2448 363.081143 362.642286L468.523886 1024l87.215543 0 0-105.325714c199.797029-13.867886 346.141257-164.512914 362.788571-364.046629L1024 554.627657 1024 467.529143 918.557257 467.529143zM512 847.082057c-184.5248 0-334.848-151.464229-334.848-334.379886 0-182.915657 151.698286-336.223086 334.848-336.223086 184.554057 0 334.848 153.307429 334.848 336.223086C846.848 695.588571 696.5248 847.082057 512 847.082057z"-->
                                  <#--p-id="5113"></path>-->
                        <#--</svg>-->
                    <#--</div>-->
                <#--</li>-->
                <#--<li></li>-->
                <#--<li></li>-->
            <#--</ul>-->
        <#--</div>-->
    <#--</div>-->

    <!-- 图层操作 -->
    <div class="layer-options">
        <ul class="option-ul">
            <li class="layer-option" id="observablePointLayerOption">
                <button type="button" class="btn" id="addObservablePoint">添加</button>
                <button type="button" class="btn">修改</button>
                <button type="button" class="btn">刷新</button>
                <button type="button" class="btn">关闭</button>
            </li>
            <li class="layer-option" id="stampLayerOption">
                <button type="button" class="btn" id="addStamp">添加</button>
            </li>
            <li class="layer-option"></li>
        </ul>
    </div>

    <!-- overLayers -->
    <!-- 流量观测点 -->
    <div id="observablePointPopup" class="ol-popup">
        <div class="popup-title">
            <div class="popup-title-content">观测点新增</div>
            <a href="#" id="observablePoint-closer" class="ol-popup-closer"></a>
        </div>
        <div class="popup-content">
            <form action="" class="form-inline-table" id="observableInfoForm">
                <table class="new-observable-point-info">
                    <tr>
                        <td class="info-label"><font class="warning-red">*</font> 观测点名称</td>
                        <td class="info-value" colspan="3"><input type="text" id="opName" name="gcdmc"/></td>
                    </tr>
                    <tr>
                        <td class="info-label"><font class="warning-red">*</font> 观测点编号</td>
                        <td class="info-value" colspan="3"><input type="text" id="opCode" name="gcdbh"/></td>
                    </tr>
                    <tr>
                        <td class="info-label"><font class="warning-red">*</font> 管理单位</td>
                        <td class="info-value" colspan="3">
                            <input type="text" id="opManagement" name="gcdjgid">
                        </td>
                    </tr>
                    <tr>
                        <td class="info-label">位置</td>
                        <td class="info-value" colspan="3"><input type="text" id="opLocation" name="wz"/></td>
                    </tr>
                    <tr>
                        <td class="info-label"><font class="warning-red">*</font> 起点坐标</td>
                        <td class="info-value" colspan="3"><input type="text" id="startCoordinate" name="start"/></td>
                    </tr>
                    <tr>
                        <td class="info-label"><font class="warning-red">*</font> 终点坐标</td>
                        <td class="info-value" colspan="3"><input type="text" id="endCoordinate" name="end"/></td>
                    </tr>
                    <tr>
                        <td class="info-label"><font class="warning-red">*</font>所属航道</td>
                        <td class="info-value" colspan="3">
                            <select class="select" name="hdpk" id="opChannel">

                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="info-label"><font class="warning-red">*</font>所属航段</td>
                        <td class="info-value" colspan="3">
                            <select class="select" name="htpk" id="opLeg">

                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="info-label"><font class="warning-red">*</font> 行政区划</td>
                        <td class="info-value" colspan="3">
                            <select class="select" name="xzqhid" id="opArea">
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="info-label">有无基站</td>
                        <td class="info-value">
                            <input type="radio" name="ywjz" value="1"> 有
                            <input type="radio" name="ywjz" checked value="0"> 无
                        </td>
                        <td class="info-label">是否进出口</td>
                        <td class="info-value">
                            <input type="radio" name="sfjck" value="1"> 是
                            <input type="radio" name="sfjck" checked value="0"> 否
                        </td>
                    </tr>
                    <tr>
                        <td class="info-label"><font class="warning-red">*</font> 备注</td>
                        <td class="info-value" colspan="3"><textarea id="opRemarks" name="bz"></textarea></td>
                    </tr>
                </table>
            </form>

        </div>
        <div clas="popup-footer">
            <div class="popup-footer-buttons">
                <button type="button" class="btn btn-warning" id="addObservablePointBtn">保存</button>
                <button type="button" class="btn btn-info" id="cancelObservablePointBtn">关闭</button>
            </div>
        </div>
    </div>

    <div id="stampPopup" class="ol-popup">
        <div class="popup-title">
            <div class="popup-title-content">点标记</div>
            <a href="#" id="stamp-closer" class="ol-popup-closer"></a>
        </div>
        <div class="popup-content">
            <form action="" class="form-inline-table" id="stampInfoForm">
                <table class="new-observable-point-info">
                    <tr>
                        <td class="info-label"><font class="warning-red">*</font> 名称</td>
                        <td class="info-value" colspan="3"><input type="text" id="stampName" name="name"/></td>
                    </tr>
                    <tr>
                        <td class="info-label"> 备注</td>
                        <td class="info-value" colspan="3"><textarea id="stampRemarks" name="bz"></textarea></td>
                    </tr>
                </table>
            </form>

        </div>
        <div clas="popup-footer">
            <div class="popup-footer-buttons">
                <button type="button" class="btn btn-warning" id="addObservablePointBtn">保存</button>
                <button type="button" class="btn btn-info" id="cancelObservablePointBtn">关闭</button>
            </div>
        </div>
    </div>
</div>

<ex-section id="ScriptBody">
    <!--add by yanyj 20180719 start-->
    <link rel="stylesheet" href="${request.contextPath}/css/modules/map/map.css">
    <link rel="stylesheet" href="${request.contextPath}/css/vendors/openlayers/ol.min.css">
    <#-- ol-debug -->
    <script type="text/javascript" src="${request.contextPath}/js/main/vendors/popper/popper.min.js"></script>
    <#--<script type="text/javascript" src="${request.contextPath}/js/main/vendors/openlayers/ol-debug.js"></script>-->
    <script type="text/javascript" src="${request.contextPath}${urls.getForLookupPath('/js/main/vendors/openlayers/ol.min.js') }"></script>
    <script type="text/javascript" src="${request.contextPath}/js/main/vendors/pocket/pocket.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/js/main/vendors/openlayers/ol-util.js"></script>
    <#--<script type="text/javascript" src="${request.contextPath}/js/main/modules/map/common/coordinate.js"></script>-->
    <#--<script type="text/javascript" src="${request.contextPath}/js/main/modules/map/common/map-util.js"></script>-->
    <#--<script type="text/javascript" src="${request.contextPath}/js/main/modules/map/common/util.js"></script>-->
    <script type="text/javascript" src="${request.contextPath}${urls.getForLookupPath('/js/main/modules/map/dist/map-common.min.js')}"></script>
    <!--add by yanyj 20180719 end-->
    <script type="text/javascript" src="${request.contextPath}${urls.getForLookupPath('/js/main/modules/map/dist/mapList.min.js')}"></script>
    <#--<script type="text/javascript" src="${request.contextPath}/js/main/modules/map/dist/mapList.js?v=<@spring.message 'js.version'/>"></script>-->
    <script type="text/javascript">
        pageLogic.initData = {
            modalParams: [],
            restUrlPrefix: "dzdt",
            queryMsg: {},
            mapSetting: {
                zoom: '<@spring.message "map.zoom"/>',
                center: '<@spring.message "map.center"/>'.split(',')
            }
        };

    </script>
</ex-section>
</body>
</html>
<!--add by yanyj 20180716 end-->
